/* 全局基础色系 */
.root {
    -fx-base: #ffffff; /* 高级感浅黑色基底 */
    -fx-background: #cfebe0; /* 全局黑色背景 */
}

/* 左侧功能区样式（示例类名为.left-section） */
.left-section {
    /*-fx-background-color: #f5f5f5; !* 柔和灰背景 *!*/
    /*-fx-border-color: #0A5CAA; !* 主蓝边框 *!*/
    -fx-padding: 15px;
    -fx-border-radius: 8px;
}

/* 右侧控制区样式（示例类名为.right-section） */
.right-section {
    /*-fx-background-color: #2c3e50; !* 深空灰背景 *!*/
    /*-fx-border-color: #0A5CAA; !* 主蓝边框 *!*/
    -fx-padding: 10px;
    -fx-alignment: center-right;
}

.action-button {
    -fx-text-fill: white !important;
    -fx-background-color:#8B4513;
    -fx-background-insets: 0, 0;
    -fx-background-radius: 3;
    -fx-padding: 8 15;
    -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.3), 5, 0, 0, 2);  // 恢复阴影效果
-fx-font-weight: 500;
}



/* 木纹纹理的悬停效果 */
.action-button:hover {
    -fx-background-color: #4A1C06;
    -fx-text-fill: white !important;
    -fx-background-insets: 0, 0;
    -fx-background-radius: 3;
    -fx-padding: 8 15;
    -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.4), 5, 0, 0, 2);
}

/* 交互元素强化 */
.control-bar {
    -fx-background-color: transparent;
    -fx-pref-height: 0;
}
.control-bar:hover {
    -fx-background-color: rgba(0,0,0,0.25); /* 深色半透明 */
    -fx-padding: 10px;
    -fx-border-radius: 4px;
    -fx-border-color: #0A5CAA;
}

/* 可视化组件优化 */
.video-card {
    -fx-background-color: #f5f5f5; /* 左侧柔和灰 */
    -fx-border-color: #0A5CAA;
    -fx-border-radius: 6px;
    -fx-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.slider .track {
    -fx-background-color: #2c3e50; /* 右侧深空灰 */
    -fx-border-color: #0A5CAA;
    -fx-radius: 4px;
}
.slider .thumb {
    -fx-background-color: #0A5CAA;
    -fx-border-radius: 4px;
}

/* 状态提示系统 */
.status-bar {
    -fx-background-color: #2c3e50; /* 右侧深空灰 */
    -fx-padding: 5 15;
    -fx-font-size: 12px;
    -fx-text-fill: #ecf0f1;
    -fx-border-color: #0A5CAA;
    -fx-border-bottom-width: 2px;
}

/* 媒体控制增强 */
.media-button {
    -fx-background-color: transparent;
    -fx-text-fill: #ecf0f1;
    -fx-border-color: transparent;
}
.media-button:hover {
    -fx-background-color: rgba(0,0,0,0.1);
    -fx-border-color: #0A5CAA;
    -fx-cursor: hand;
    -fx-padding: 5px;
}

.thumbnail-box {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
    -fx-border-width: 2;
}

.thumbnail-box:hover {
    -fx-background-color: #ecf0f1;
}

.thumbnail-box.selected {
    -fx-background-color: #3498db50 !important;
    -fx-border-color: #2980b9 !important;
}

/* 确保TilePane自动换行 */
.tile-pane {
    -fx-tile-alignment: CENTER;
    -fx-alignment: CENTER;
    -fx-pref-columns: 4; /* 根据宽度自动计算列数 */
}
/* 在CSS中添加头像悬停效果 */
#userAvatar {
    -fx-cursor: hand;
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 10, 0, 0, 2);
}

#userAvatar:hover {
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.4), 10, 0, 0, 3);
}